<template>
    <view class="message tn-safe-area-inset-bottom">

        <view v-if="list.length > 0">

            <view class="tn-flex tn-flex-wrap tn-margin-sm" style="justify-content: space-between;">
                <block v-for="(item, index) in list" :key="index">
                    <view class="" style="width: 49%;margin-top: 20rpx;"  @click="goDetail(item.id)">
                        <view class="tn-blogger-content__wrap">
                            <view :class="'nav-li bg-index'" :style="'background-color: ' + bgColorList[index]">
                                <view class="nav-name">{{ item.name }}</view>
                            </view>
                        </view>
                    </view>
                </block>
            </view>

        </view>

        <view v-else>
            <tui-no-data imgUrl="/static/img/img_noorder_3x.png">暂无数据</tui-no-data>
        </view>

        <view class="tn-tabbar-height"></view>

        <!-- 底部导航栏组件 -->
        <tabbar :theme="tabbarStyle"></tabbar>

    </view>
</template>
    
<script>
import newsApi from "@/common/api/news.js"

export default {
    name: 'Message',
    data() {
        return {
            list: [],
            hasMore: 1,
            currentPage: 1,
            loadFlag: 'loading',
            bgColorList:['#ff4f94']
        }
    },
    onLoad(e) {

        this.generateRandomColors(10);
        this.select(e.subjectId)
    },
    async onReachBottom() {
        console.log("onReachBottom")
        if (this.hasMore > 1) {
            this.currentPage++
            this.getData()
        }
    },
    methods: {
          // 生成随机颜色
          generateRandomColor() {
            const letters = '0123456789ABCDEF';
            let color = '#';
            for (let i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        },
        
        // 生成指定数量的随机颜色
        generateRandomColors(count) {
            this.bgColorList = [];
            for (let i = 0; i < count; i++) {
                this.bgColorList.push(this.generateRandomColor());
            }
        },
        
        // 确保颜色数量足够
        ensureColors(count) {
            if (this.bgColorList.length < count) {
                this.generateRandomColors(count);
            }
        },
        // 精选题库列表
		select(e) {
            this.loadFlag = 'loading'
			this.http("cate/curatedQuestionBankcategory", { page: this.currentPage,subject_id:e }, "get").then(res => {
                if (res && res.data) {
                    this.list = this.list.concat(res.data.list.data)
                    console.log('this.list',this.list);
                    this.hasMore = res.data.total
                    this.currentPage = res.data.current_page
                    this.loadFlag = 'over'
                }
			})
		},
        // 跳转详情
        goDetail(id) {
            console.log('id', id);
            this.utils.goto('/pagesSubject/selectedQuestion?id=' + id)
        },
    }
}
</script>
    
<style lang="scss">
page {
    background-color: #fff;
}
.nav-li {
	padding: 40rpx 30rpx;
	width: 100%;
	background-image: url(https://s1.ax1x.com/2020/06/27/NyU04x.png);
	background-size: cover;
	background-position: center;
	position: relative;
	z-index: 1;
	margin: 0 !important;
}

.nav-name {
	font-size: 28upx;
	text-transform: Capitalize;
	margin-top: 20upx;
	position: relative;
	text-overflow: ellipsis;
	overflow: hidden;
    color:#FFFFFF;
}

.nav-name::before {
	content: '';
	position: absolute;
	display: block;
	width: 40rpx;
	height: 6rpx;
	background: #fff;
	bottom: 0;
	right: 0;
	opacity: 0.5;
}

.nav-name::after {
	content: '';
	position: absolute;
	display: block;
	width: 100rpx;
	height: 1px;
	background: #fff;
	bottom: 0;
	right: 40rpx;
	opacity: 0.3;
}

.message {
    max-height: 100vh;
}

/* 自定义导航栏内容 start */
.custom-nav {
    height: 100%;

    &__back {
        margin: auto 30rpx;
        font-size: 40rpx;
        margin-right: 10rpx;
        flex-basis: 5%;
        width: 100rpx;
        position: absolute;
    }
}

/* 自定义导航栏内容 end */

/* 底部安全边距 start*/
.tn-tabbar-height {
    min-height: 20rpx;
    height: calc(40rpx + env(safe-area-inset-bottom) / 2);
    height: calc(40rpx + constant(safe-area-inset-bottom));
}


.tn-color-wallpaper {
    color: #1D2541;
}

/* 页面阴影 start*/
.wallpaper-shadow {
    border-radius: 15rpx;
    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
}


/* 图标容器15 start */
.icon15 {
    &__item {
        width: 30%;
        background-color: #FFFFFF;
        border-radius: 10rpx;
        padding: 30rpx;
        margin: 20rpx 10rpx;
        transform: scale(1);
        transition: transform 0.3s linear;
        transform-origin: center center;

        &--icon {
            width: 105rpx;
            height: 105rpx;
            font-size: 60rpx;
            border-radius: 50%;
            margin-bottom: 18rpx;
            position: relative;
            z-index: 1;

            &::after {
                content: " ";
                position: absolute;
                z-index: -1;
                width: 100%;
                height: 100%;
                left: 0;
                bottom: 0;
                border-radius: inherit;
                opacity: 1;
                transform: scale(1, 1);
                background-size: 100% 100%;


            }
        }
    }
}

/* 用户头像 start */
.logo-image {
    width: 140rpx;
    height: 140rpx;
    position: relative;
}

.logo-pic {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    border: 1rpx solid rgba(255, 255, 255, 0.05);
    box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.05);
    overflow: hidden;
}
</style>
    
    